<template>
  <div class="container tree-list-layout">
    <treeOffice @click="handleTreeClick" ref="treeOffice"  class="box-left"/>
    <data-view
      ref="dataView"
      propViewKey="sys_office_crud"
      propViewForm="sys/office/detail.vue"
      :propInitData="selectedTreeNode"
      @after-save="handleAfterSave"
      @after-delete="handleAfterDelete"
      @extra-button-click="extraButtonClick"
      :propIsTdesign="true"
      class="box-right"
    />
  </div>
</template>

<script>
import treeOffice from '@/components/custom/bus/treeOffice.vue'

export default {
  name: 'office',
  data() {
    return {
      selectedTreeNode: {},
    }
  },
  created() {
  },
  components: {
    treeOffice
  },
  watch: {
  },
  methods: {
    handleTreeClick(data) {
      this.selectedTreeNode = data
      if( data.id === "0") {
        this.$refs.dataView.setQueryWrapper()
      }else {
        let wrapper = this.$newWrapper()
        wrapper.eq('parent_id', this.strings.defaultIfBlank(this.selectedTreeNode.id, -1))
        wrapper.or('id', this.strings.defaultIfBlank(this.selectedTreeNode.id, -1))
        this.$refs.dataView.setQueryWrapper(wrapper)
      }
    },

    handleAfterSave(status, data) {
      this.$refs.treeOffice.load()
    },
    handleAfterDelete() {
      this.$refs.treeOffice.load()
    },
    extraButtonClick({button, data, index}) {
      let buttonKey = button.key
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  background-color: #fff;
}
.tree-container {
  padding:10px;
  margin-right:20px;
  border:solid 1px #DCDFE6;
  height:100%
}
.tree-filter {
  margin:10px;
  width:80%
}
</style>
